<script setup>
import { ref,reactive, nextTick,onActivated,getCurrentInstance,onMounted, watch  } from 'vue'; 
import { useRoute,useRouter } from 'vue-router';
import { ElMessage,ElMessageBox  } from 'element-plus';
import { lookExpress } from '@/api/MallManage/order.js'
const pageLoading = ref(false);
const open = async (orderId)=>{

    logistcsFlag.value = true;
    pageLoading.value= true;
    try{
      let result = await lookExpress({orderId:orderId});
      emptyInfo.value = result.expressTrack.message;
      logistcsInfo.value = {
        expressCom: result.expressCom,
        expressNum: result.expressNum,
        note:result.note,
        expressName:result.expressName
      }
      riderTimeMark.value= result.expressTrack?result.expressTrack.data:[]
    }catch(e){
      console.log(e);
    }finally{
      pageLoading.value= false
    }
}
const logistcsFlag = ref(false);
const emptyInfo = ref("") 
const logistcsInfo = ref({
  expressCom: "",
  expressNum: "",
  note:"",
  expressName:""
});
const riderTimeMark = ref([

]);
defineExpose({ open })
</script>
<template>
    <el-drawer
        v-model="logistcsFlag"
        title="查看物流"
        direction="rtl"
        width="576px"
    >
      <div style="width:100%;height:100%" v-loading="pageLoading">
        <template v-if="!pageLoading">
          <div class="logistcs-contain" v-if="riderTimeMark.length > 0 && riderTimeMark">
              <div class="line-p">
                <div class="line-p-1">物流公司：</div><div class="line-p-2">{{ logistcsInfo.expressName || '-' }}</div>
              </div>
              <div class="line-p">
                <div class="line-p-1">快递单号：</div><div class="line-p-2">{{ logistcsInfo.expressNum || '-' }}</div>
              </div>
              <div class="line-p">
                <div class="line-p-1">订单备注：</div><div class="line-p-2">{{ logistcsInfo.note || '-' }}</div>
              </div>
              <el-timeline  class="timelien-content">
                  <template v-for="(elem,index) in riderTimeMark" :key="index">
                      <el-timeline-item  hide-timestamp placement="top" timestamp="2018/4/12">
                              
                      <template #dot >
                          <span class="details-dot"></span>
                      </template>
                      <div class="timelien-content-time">
                          <span v-if="elem.status" style="font-weight: 600">{{elem.status}}</span>
                          <span style="color:#666;font-size:14px">{{ elem.time }}</span>
                          <div style="line-height: 20px;margin-top: 5px;color:#000;font-size:14px">{{ elem.context || elem.message }}</div>
                      </div>
                      </el-timeline-item>
                  </template>
              </el-timeline>

          </div>
          <div class="empty-logistcs" v-else>
            <div class="empty-icon">
              <div class="img">
                <img src="@/assets/icon/truck-icon.png" alt="">
              </div>
              <div class="text">
                {{ emptyInfo || '暂无物流信息' }}
              </div>
            </div>
          </div>
        </template>
      </div>
    </el-drawer>
</template>
<style lang="less" scoped>
.line-p{
  width: 100%;
  margin-bottom:12px;
  color:#000;
  font-size: 14px;
  line-height: 14px;
  display: flex;
  justify-content: flex-start;
  .line-p-1{
    width: 72px;
  }
  .line-p-2{
    width: calc(100% - 72px);
    word-break: break-all;
    word-wrap: break-word;
    line-height: 16px;
  }
}
.empty-logistcs{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .empty-icon{

    height: 100px;
    .img{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        img{
          width: 80px;
          height: 80px;
        }
    }
    .text{
      width: 100%;
      text-align: center;
      font-weight: bold;
      line-height: 18px;
      color: #3480ff;
      font-size: 18px;
    }
  }
}
.logistcs-contain{
    width: 100%;
    .timelien-content{
        line-height: normal;
        padding-inline-start: 0px;
        .timelien-content-time-active{
            font-weight: 500;
            span{
                margin-right: 20px;
            }
        }
        .timelien-content-time{
            span{
                margin-right: 20px;
                color:#000;
                font-size: 16px;

            }
        }
        .details-dot{
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            border: 2px solid #C0C4CC;
            margin-left: -1.5px;
            background: #fff;
        }
        .details-dot-active{
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            border: 2px solid #1890FF;
            background: #fff;
            margin-left: -1.5px;
        }
    }
}
</style>